<template>
    <div class="collectrecommend">
        <ul class="listcon" v-if="matchlists.length>0">
            <li v-for="(item,index) in matchlists">
                <div class="tophead">
                    <img :src="item.expert.avatar">
                    <span>
                        <strong>{{item.expert.nick}}</strong>
                        <em><b>{{item.expert.state}}</b><b v-if="item.expert.combo>0">{{item.expert.combo}}</b></em>
                    </span>
                    <figure class="right">
                        <!--<a href="javascript:;">查看</a>-->
                        <b v-if="item.bean===0">免费</b>
                        <strong v-else class="double"><b class="caidou">{{item.bean}}彩豆</b><b class="back"
                                                                                              v-if="item.back">不中返还</b></strong>
                    </figure>
                </div>
                <p class="msg">{{item.title}}</p>
                <Matchmiddle :matches="item.matches"/>
            </li>
        </ul>
        <Nodata v-else type="5" spanvalue="暂无推荐"/>
    </div>
</template>

<script>
    import Matchmiddle from '../../components/Matchmiddle';
    import Headerinfo from '../../components/Headinfo.vue';
    import {getMyshoucangR} from '../../service/my';
    import {getMytoken} from '../../service/common';
    import Nodata from '../../components/Nodata.vue';

    export default {
        components: {Matchmiddle, Headerinfo, Nodata},
        data() {
            return {
                page: 1,
                matchlists: []
            };
        },
        created() {
            this.getDate(1);
        },
        computed: {},
        methods: {
            async getDate(page){
                const {token}=await getMytoken();
                if(!token) {
                    this.$vux.toast.text(data.msg);
                    return;
                }
                const {data}=await getMyshoucangR({token, page});
                if(data && data.code === 0) {
                    this.matchlists = data.data.plans;
                }
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    @import "../app";

    .listcon {
        li {
            padding: 20px 30px 1px 30px;
            margin-bottom: 10px;
            background: #fff;
            .tophead {
                display: flex;
                align-items: center;
                img {
                    width: 90px;
                    height: 90px;
                    border-radius: 50%;
                    margin-right: 30px;
                }
                span {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    strong {
                        font-size: @fz30;
                    }
                    em {
                        b {
                            .setnormalcss(26px);
                            box-sizing: border-box;
                            border-radius: 26px;
                            border: 1px solid @color22;
                            color: @color22;
                            padding: 0 14px;
                            margin-right: 10px;
                            display: inline-block;
                            font-size: @fz20;
                        }
                    }
                }
                .right {
                    font-size: @fz28;
                    .double {
                        border: 1px solid @colororange;
                        border-radius: 6px;
                        box-sizing: border-box;
                        b {
                            padding: 0 10px;
                            .setnormalcss(46px);
                            &.caidou {
                                background: @colororange;
                                color: #fff;
                                font-size: @fz28;
                            }
                            &.back {
                                color: @colororange;
                                font-size: @fz20;
                            }
                        }
                    }
                    a {
                        color: @color13;
                    }
                    b {
                        color: @colororange;
                    }
                }
            }
            .msg {
                margin-top: 20px;
            }
        }
    }
</style>